<template>
  <div class="container">
    <div class="operations">
      <el-button
        type="primary"
        size="large"
        @click="newSchooldialogVisible = true"
        style="background-color: #003cff;">+新增</el-button
      >
      <label for="">
        <span style="background-color: #ffffff;color: #000000;">学校名称</span>
        <input type="text" v-model="searchText" style="border-radius: 6px;background-color: #dddddd;border: 1px solid #ffffff;outline: none;color: #ffffff;" />
      </label>
      <el-button type="primary" size="large" @click="searchText = ''"
        style="background-color: #003cff;">重置</el-button
      >
    </div>
    <el-table :data="filteredSchoolList" class="my-table">
      <el-table-column fixed prop="school_code" label="学校编码"  />
      <el-table-column prop="school_name" label="学校名称"  />
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="editSchool(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="newSchooldialogVisible"
      title="新增院校"
      width="30%"
      :before-close="handleClose"
    >
      <div class="box">
        院校编码
        <el-input
          style="width: 200px"
          v-model="school_code"
          placeholder="编码"
        />
      </div>
      <br>
      <div class="box">
        院校名称
        <el-input
          style="width: 200px"
          v-model="school_name"
          placeholder="名称"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="newSchool" style="background-color: #003cff;;"> 新增 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="editSchoolDialogVisible"
      title="编辑院校"
      width="30%"
      :before-close="handleClose"
    >
      <div class="box">
        院校编码
        <el-input
          style="width: 200px"
          v-model="school_code"
          placeholder="编码"
        />
      </div>
      <br>
      <div class="box">
        院校名称
        <el-input
          style="width: 200px"
          v-model="school_name"
          placeholder="名称"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save" style="background-color: #003cff;"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { createSchool, modifySchool } from "../api/schoolApi";
import { mapActions, mapState } from "vuex";

export default {
  created() {
    this.fetchSchoolList();
  },
  data() {
    return {
      newSchooldialogVisible: false,
      editSchoolDialogVisible: false,
      school_name: "",
      school_code: "",
      searchText: "",
      editingSchool: null,
    };
  },
  computed: {
    ...mapState(["schoolList"]),
    filteredSchoolList() {
      return this.schoolList.filter((school) => {
        return (
          school.school_name.indexOf(this.searchText) >= 0 ||
          school.school_code.indexOf(this.searchText) >= 0
        );
      });
    },
  },
  methods: {
    ...mapActions(["fetchSchoolList"]),
    newSchool() {
      createSchool(this.school_code, this.school_name)
        .then((res) => {
          this.schoolList.push(res);
          ElMessage({
            message: "创建院校成功",
            type: "success",
          });
          this.school_code = "";
          this.school_name = "";
        })
        .catch((error) => {
          ElMessage({
            message: "创建院校失败，" + error,
            type: "warning",
          });
        });
      this.newSchooldialogVisible = false;
    },
    editSchool(school) {
      this.editingSchool = school;
      this.editSchoolDialogVisible = true;
      this.school_name = school.school_name;
      this.school_code = school.school_code;
    },
    cancel() {
      this.editSchoolDialogVisible = false;
      this.newSchooldialogVisible = false;
      this.school_code = "";
      this.school_name = "";
    },
    save() {
      if (
        this.editingSchool.school_code == this.school_code &&
        this.editingSchool.school_name == this.school_name
      ) {
        ElMessage({
          message: "您未做任何修改",
          type: "warning",
        });
        return;
      }
      modifySchool(this.editingSchool.id, this.school_code, this.school_name)
        .then((res) => {
          // 1. 重新获取学校列表
          // 2. 只更新列表中当前修改的学校数据
          ElMessage({
            message: "修改成功",
            type: "success",
          });
          this.editingSchool.school_code = res.school_code;
          this.editingSchool.school_name = res.school_name;

          this.editingSchool = null;
        })
        .catch((error) => {
          ElMessage({
            message: error,
            type: "warning",
          });
        });
      this.editSchoolDialogVisible = false;
    },
  },
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;

  display: flex;
  flex-flow: column nowrap;
  align-items: center;

  padding: 20px;
  box-sizing: border-box;
}

.operations {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: 80px;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid var(--el-border-color);

  margin-bottom: 20px;

  .el-button {
    width: 80px;
    height: 40px;

    margin: 20px;
  }

  label {
    margin: 20px;
    font-size: 20px;
  }

  input {
    width: 200px;
    height: 18px;
    padding: 10px;
    margin: 5px;
  }
}

.my-table {
  //   width: 80%;
}
</style>
